<template>
  <div class="financialSetBox">
    <header-box title="金融管理" :showLeft="true" :showRight="false"></header-box>

    <group>
      <cell title="苏宁金融账号" link="accountInfo">
        <span>185******12</span>
      </cell>
      <cell title="账号类型" link="financialSet">
        <span>个人账号</span>
      </cell>
      <cell title="手机号码" link="financialSet">
        <span>185******12</span>
      </cell>
    </group>
    <div class="footerBox" @click="dialogShow=true">换绑苏宁金融</div>
    <confirm v-model="dialogShow" confirm-text="确认换绑" @on-confirm="onConfirm">
      <p class="msg">
        1、您使用苏宁金融账号支付的订单若出现退货或退款，资金将退回订单付款的苏宁金融账号内；
        <br />2、换绑苏宁金融账号成功后，您的易购账号将无法使用原苏宁金融账号中的资产；
        <br />3、资金找回需要使用原苏宁金融账号登录苏宁金融APP，请谨慎操作；
        <br />4、换绑苏宁金融账户成功后，您无法继续参与春节红包等游戏。
      </p>
    </confirm>
  </div>
</template>

<script>
import HeaderBox from '@/components/header'
import { Cell, Group, Confirm } from 'vux'
export default {
  components: {
    HeaderBox,
    Cell,
    Group,
    Confirm
  },
  data() {
    return {
      dialogShow: false
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.financialSetBox {
  .footerBox {
    margin: 40px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: #f60;
    color: #fff;
    border-radius: 20px;
    font-size: 30px;
  }
  .msg {
    text-align: left;
    color: #666;
    font-size: 28px;
    line-height: 1.5;
  }
}
</style>